<template>
    <div class='main' @scroll='reqMore'>
        <!--选择地址-->
        <SlePos 
        v-show='isShowSelPos' 
        @closePos='isShowSelPos=false' 
        @reqPos='reqPos'
        @subPos='recPos'
        :posList=posList
        ></SlePos>

        <!--头部-->
        <MainHeader 
        :address='address'
        :weather='weather'
        :hotSearchGoods='hotSearchGoods'
        @showSlePos='isShowSelPos=true'
        ></MainHeader>

        <!--热搜-->
        <Carousel :sortGoods='sortGoods'></Carousel>

        <!--推荐-->
        <TuiJian :resList='restaurantList' :loadState='loadState'></TuiJian>
        
        <!--回到顶部-->
        <span v-show='isShowGoTop' class='fa fa-arrow-up fa-3x go-top' @click='goBackClick'></span>
    </div>
</template>
<script>
    import MainHeader from '../components/MainHeader'
    import Geohash from '../util/geohash.js'
    import Carousel from '../components/Carousel'
    import TuiJian from '../components/TuiJian'
    import SlePos from '../components/SlePos'
    import bus from '../util/bus.js'
    
    export default{
        data:function(){
            return {
                address:{},
                weather:{},
                hotSearchGoods:[],
                sortGoods:[],
                restaurantList:[],
                posList:[],
                loadState:'normal',
                isShowGoTop:false,
                isShowSelPos:false,
                os:0,
                latitude:34.720871, // 纬度
                longitude:113.742579, // 经度
            }
        },
        components:{
            MainHeader,
            Carousel,
            TuiJian,
            SlePos
        },
        computed:{
            gh:function(){
				return Geohash.encode(this.latitude,this.longitude,12);
			}
        },
        avtivated:function(){
            
        },
        mounted:function(){ 
            // window.navigator.geolocation.getCurrentPosition(function(pos){
            //     this.latitude = pos.coords.latitude
            //     this.longitude = pos.coords.longitude
            // } )
            bus.latitude = this.latitude
            bus.longitude = this.longitude
            this.reqAddress()
            this.reqWeather()
            this.reqHotGoods()
            this.reqSortGoods()
            this. requestRestaurantList()
        },
        
        methods:{
            reqMore:function(e){
                var cH = e.target.clientHeight
                var sH = e.target.scrollHeight
                var sT = e.target.scrollTop
                if(sT >= sH - cH -100){
                    this.requestRestaurantList()
                }
                if(sT>300){
                    this.isShowGoTop = true
                }else{
                    this.isShowGoTop = false
                }
            },
            goBackClick:function(){
                this.$el.scrollTop = 0
            },
            //根据输入框中的数据请求地址
            reqPos:function(inpVal){
                this.$axios.get('ele/bgs/poi/search_poi_nearby',{
                    params:{
                        keyword:inpVal,
                    }
                })
                .then(res=>{
                    this.posList = res.data
                })
            },
            // 接收选择的地址
            recPos:function(pos){
                this.address = pos.name
                this.longitude = pos.longitude
                this.latitude = pos.latitude
                console.log(pos.longitude)
                // ------------------未完成地址改变请求的数据改变功能-------------
                // this.reqAddress()
                // this.reqWeather()
                // this.reqHotGoods()
                // this.reqSortGoods()
                // this. requestRestaurantList()
            },
            // 请求所在城市地址
            reqAddress:function(){
                this.$axios.get("ele/bgs/poi/reverse_geo_coding",{
                    params:{
                        latitude:this.latitude,
                        longitude:this.longitude
                    }
                })
                .then(res=>{
                    this.address = res.data.name
                })
            },
            // 请求天气
            reqWeather:function(){
                this.$axios.get("ele/bgs/weather/current",{
                    params:{
                        latitude:this.latitude,
                        longitude:this.longitude
                    }
                })
                .then(res=>{
                    this.weather = res.data
                })
            },
            //请求热搜商品
            reqHotGoods:function(){
                this.$axios.get("ele/shopping/v3/hot_search_words",{
                    params:{
                        latitude:this.latitude,
                        longitude:this.longitude,
                    }
                })
                .then(res=>{
                    this.hotSearchGoods = res.data
                })
            },
            //请求分类商品
            reqSortGoods:function(){
                this.$axios.get('ele/v2/index_entry',{
                    params:{
                        geohash:this.gh,
                        group_type:1,
						"flags":["F"]
                    }
                })
                .then(res=>{
                    this.sortGoods = res.data
                })
            },
            // 请求推荐商家
            requestRestaurantList:function(){
                if(this.loadState == 'loading'){
                    return 
                }
                this.loadState = 'loading'
                this.$axios.get('ele/shopping/restaurants',{
                    params:{
                        latitude:this.latitude,
						longitude:this.longitude,
						limit:20,
						offset:this.restaurantList.length,
						"extras":["activities"],
						terminal:"h5"
                    }
                })
                .then(res=>{
                    this.restaurantList = this.restaurantList.concat(res.data) 
                    this.loadState = 'success'
                },()=>{
                    this.loadState = 'fail'
                })
            }
        }
    }
</script>
<style scoped>
    .main{
        height: calc(100vh - 50px);
        overflow: scroll;
    }
    .go-top{
        width: 4rem;
        height: 4rem;
        position: fixed;
        line-height: 3.5rem;
        bottom: 70px;
        right: 10px;
        border: 1px solid #999999;
        border-radius: 50%;
        background-color: #fff;
        text-align: center;
    }
</style>